<!DOCTYPE html>
<html lang="en">

<head>
    
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap Library CSS JS CDN go here -->
    <link rel="stylesheet" href="styles/price.css">
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/checklogin.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js" crossorigin="anonymous"></script>

    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <!-- Other libraries and styles of your own -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
</head>

<body>
    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- 居中内容 -->
    <div class="centered-content">
        <!-- 搜索栏 -->
        <div class="main-content">
            <!-- 引导步骤 -->
            <div class="guide-steps">
                <h2 class="section-title">Procedure of use</h2>
                <ol>
                    <li>Enter food name</li>
                    <li>Click Search button</li>
                    <li>View details</li>
                </ol>
            </div>
            <!-- 搜索栏与特色功能及搜索结果 -->
            <div class="center-content">
                <!-- 轮播图 -->
                <div class="carousel">
                    <img src="https://cdn.pixabay.com/photo/2024/05/10/10/51/food-8752900_640.jpg" alt="Slide 1" class="active">
                    <img src="https://bpic.588ku.com/back_origin_min_pic/21/06/29/df1cffee0f8c343abe6118e50a7465ac.jpg" alt="Slide 2">
                    <img src="https://www.bizhigq.com/pc-img/2023-06/5580.jpg" alt="Slide 3">
                    <button class="prev-btn"><i class="fa-solid fa-chevron-left"></i></button>
                    <button class="next-btn"><i class="fa-solid fa-chevron-right"></i></button>
                    <div class="carousel-indicators"></div>
                </div>
                <!-- 搜索栏 -->
                <div class="search-section">
                    <h1 class="main-title">Discover your food ingredients</h1>
                    <p class="description">Find a variety of cuisines and get detailed price information on ingredients</p>
                    <div class="search-bar">
                        <input type="text" id="searchInput" placeholder="Search for your favorite food">
                        <button id="searchButton">Start searching</button>
                    </div>
                </div>
                <!-- 特色功能介绍 -->
                <div class="feature-intro">
                    <h2 class="section-title">Characteristic function</h2>
                    <div class="feature-list">
                        <div class="feature-item">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            <h3>Precision search</h3>
                            <p>Enter the food name to quickly find relevant food information.</p>
                        </div>
                        <div class="feature-item">
                            <i class="fa-solid fa-images"></i>
                            <h3>Picture display</h3>
                            <p>View HD images of food and ingredients to see how it looks.</p>
                        </div>
                        <div class="feature-item">
                            <i class="fa-solid fa-tags"></i>
                            <h3>Price inquiry</h3>
                            <p>Get detailed prices of ingredients and plan your meal budget properly.</p>
                        </div>
                    </div>
                </div>
                <!-- 搜索结果展示 -->
                <div id="searchResults" class="search-results">
                    <!-- 搜索结果将通过 JavaScript 动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!-- Your own JavaScript functions go here -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/price1.js"></script>
    <script src="./scripts/carousel.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchButton = document.getElementById('searchButton');
            const searchInput = document.getElementById('searchInput');

            searchButton.addEventListener('click', function () {
                const searchTerm = searchInput.value;
                // 跳转到 results.html 并传递搜索词
                window.location.href = `results.html?searchTerm=${encodeURIComponent(searchTerm)}`;
            });
        });
    </script>
</body>

</html>